<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>响应式导航</title>

    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css" type="text/css">

    <style>
        #headerImg {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            padding: 5px;
        }
    </style>
</head>

<body>
    <!--响应式导航 - begin-->
    <div class="container-fluid">
        <div class="row">
            <nav class="navbar navbar-inverse" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">手机商城</a>
                    </div>
                    <div class="collapse navbar-collapse" id="example-navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="active"><a href="#">首页</a></li>
                            <li><a href="#">登录</a></li>
                            <li><a href="#">安全退出</a></li>
                            <li><a href="#">注册</a></li>

                            <li><img id="headerImg" src="imgs/zly.jpg"></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <!--响应式导航end-->

    
    <div class='container-fluid' style='margin-top:20px;margin-bottom:20px'>
        <div class='row'>
            <!-- 下拉框begin -->
            <div class='col-md-3'>
                <select class='form-control' id='phoneType' onchange='changeType(this)'>
                    <option value='-1'>===请您选择手机类型===</option>
                    <option value="1"></option>
                    <option value="1"></option>
                    <option value="1"></option>
                </select>
            </div>
            <!-- 下拉框end -->
            <!-- 搜索框begin -->
            <div class='col-md-3'>
                <div class='input-group'>
                    <input type='text' class='form-control' id='searchName' value=''>
                    <span class='input-group-btn'>
                        <button class='btn btn-default' type='button' onclick='selectAll()'>查询</button>
                    </span>
                </div>
            </div>
            <!-- 搜索框end -->
            <!-- 添加,删除按钮begin -->
            <div class='col-md-5'>
                <button type='button' class='btn btn-info'>添加</button>&nbsp;&nbsp;
                <button type='button' class='btn btn-danger'>删除</button>
            </div>
            <!-- 添加,删除按钮end -->
        </div>
    </div>
    



    <!--缩略图begin-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="imgs/honor.jpg" alt="通用的占位符缩略图">
                    <div class="caption" style="overflow:hidden">
                        <h3 align="center" class="text-success">正品原封honor/荣耀</h3>
                        <div>
                            <span style="color: red;margin-left:5px;float: left;">¥1789</span><span
                                style="color: yellow;margin-left:10px;float: left;">包邮</span><br>
                        </div>
                        <p style="text-align:center; overflow:initial">荣耀9全网通4G手机,双卡双待高配6+64G/128Gi</p>

                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="imgs/honor.jpg" alt="通用的占位符缩略图">
                    <div class="caption" style="overflow:hidden">
                        <h3 align="center" class="text-success">正品原封honor/荣耀</h3>
                        <div>
                            <span style="color: red;margin-left:5px;float: left;">¥1789</span><span
                                style="color: yellow;margin-left:10px;float: left;">包邮</span><br>
                        </div>
                        <p style="text-align:center; overflow:initial">荣耀9全网通4G手机,双卡双待高配6+64G/128Gi</p>

                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="imgs/honor.jpg" alt="通用的占位符缩略图">
                    <div class="caption" style="overflow:hidden">
                        <h3 align="center" class="text-success">正品原封honor/荣耀</h3>
                        <div>
                            <span style="color: red;margin-left:5px;float: left;">¥1789</span><span
                                style="color: yellow;margin-left:10px;float: left;">包邮</span><br>
                        </div>
                        <p style="text-align:center; overflow:initial">荣耀9全网通4G手机,双卡双待高配6+64G/128Gi</p>

                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="imgs/honor.jpg" alt="通用的占位符缩略图">
                    <div class="caption" style="overflow:hidden">
                        <h3 align="center" class="text-success">正品原封honor/荣耀</h3>
                        <div>
                            <span style="color: red;margin-left:5px;float: left;">¥1789</span><span
                                style="color: yellow;margin-left:10px;float: left;">包邮</span><br>
                        </div>
                        <p style="text-align:center; overflow:initial">荣耀9全网通4G手机,双卡双待高配6+64G/128Gi</p>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 缩略图end -->

    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="plugins/bootstrap/js/bootstrap.js"></script>

</body>

</html>